<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
>

<head>
    <th:block th:include="include :: header('首页')"/>
    <th:block th:include="include :: select2-css"/>

    <link href="favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
    <link rel="stylesheet" th:href="@{/css/my.css}"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
</head>
<body class="">
<!--右侧主体-->
<div class="row rowNew">
    <div class="col-sm-12 search-area">
        <form id="formId">
            <div class="select-list">
                <ul class="ulForm clearfix">
                    <li class="select-time">
                        <label>选择时间： </label>
                        <div class="fl inputTime-outer">
                            <input type="text" class="time-input" th:value="${beginTime}" id="beginTime"
                                   placeholder="开始时间"
                                   name="params[beginTime]"/>
                            <div class="icon-rili"></div>
                        </div>
                        <span>--</span>
                        <div class="fl inputTime-outer">
                            <input type="text" class="time-input" th:value="${endTime}" id="endTime"
                                   placeholder="结束时间"
                                   name="params[endTime]"/>
                            <div class="icon-rili"></div>
                        </div>
                    </li>
                    <li class="btn-group">
                        <a class="thisYear btn btn-primary mlr_8">本年</a>
                        <a class="thisMonth btn btn-primary mlr_8">本月</a>
                        <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                class="fa fa-search"></i>&nbsp;搜索</a>
                    </li>
                    <script>


                    </script>
                </ul>
            </div>
        </form>
    </div>
</div>


<div class="standard">
    <div class="row " style="margin: 0;">
        <div class="col-sm-12  col-xs-12 middle-graph">
            <div class="time">
                <p class="p1">
                    共计标准
                    <span th:text="${statusCount.total}">2000</span> 个
                </p>
                <div class="line hidden-xs">
                    <div class="line-1"><i></i></div>
                    <div class="line-2">
                        <i></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom-graph ">


        <div class="bottom-box">
            <div class="row">
                <div class=" col-sm-6 item" style="padding: 0">
                    <div class="item-table">
                        <div class="item-table-1">
                            <div class="top col-lg-12" standardType="1" onclick="detailInfo2(this)">
                                <span>育苗标准</span><span th:text="${caiClass1Size} + '个'">1000</span></div>
                            <div class="bottom col-lg-12">
                                <ul>
                                    <li class="col-lg-4" standardType="1" th:attr="caiId = *{class.caiId}"
                                        onclick="detailInfo(this)" th:each="class:${caiClass1}">
                                        <div class="li-1">
                                            <div class="right-top">
                                                <span th:text="${class.caiName} + ':'">叶菜类：</span>
                                                <span th:text="${class.planCounts.total}">36</span>
                                            </div>
                                            <div class="right-middle" th:text="'占比'+${class.planCounts.total_rate}+'%'">
                                                占比70%
                                            </div>
                                            <div class="right-bottom ">
                                                <p class="active"
                                                   th:style="'width:'+${class.planCounts.total_rate}*1+'px'"></p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 item" style="padding: 0">
                    <div class="item-table">

                        <div class="item-table-1">
                            <div class="top col-lg-12" standardType="2" onclick="detailInfo2(this)">
                                <span>生产标准</span><span th:text="${caiClass2Size} +  '个'">1000</span></div>
                            <div class="bottom col-lg-12">
                                <ul>
                                    <li class="col-lg-4" standardType="2" th:attr="caiId = *{class.caiId}"
                                        onclick="detailInfo(this)" th:each="class:${caiClass2}">
                                        <div class="li-1">
                                            <div class="right-top">
                                                <span th:text="${class.caiName} + ':'">>叶菜类：</span>
                                                <span th:text="${class.planCounts.total}">36</span>
                                            </div>
                                            <div class="right-middle" th:text="'占比'+${class.planCounts.total_rate}+'%'">
                                                占比70%
                                            </div>
                                            <div class="right-bottom ">
                                                <p class="active"
                                                   th:style="'width:'+${class.planCounts.total_rate}*1+'px'"></p>
                                            </div>
                                        </div>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div th:include="include::footer"></div>
<th:block th:include="include :: select2-js"/>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>

<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var timestamp = new Date().getTime();
            var timestamp1 = new Date().getTime() + 1000 * 60 * 60 * 24 * 2;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
                ,
                format: "yyyy-MM-dd",
                value: new Date(timestamp)
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#test2' //指定元素
                ,
                format: 'yyyy-MM',
                value: new Date(timestamp1)
            });
        });


        $("#tabList li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            //2 根据当前li的索引值(index)找到底部对应的div，设置selected类名，其他div移除类名
            var index = $(this).index(); //获取当前li的索引值
            $(".bottom-box .right").eq(index).addClass("active").siblings().removeClass("active");
        });

        function reloadIt() {
            var link = ctx + "system/ncStandard/showStandard";
            var s = $('#beginTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });


        function detailInfo(obj) {

            var ancestors = $(obj).attr('caiId');
            var standardType = $(obj).attr('standardType');
            var link = ctx + 'system/ncStandard/frontStandList?ancestors=' + ancestors + '&standardType=' + standardType;
            var s = $('#beginTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e;
            $.modal.openTab("标准列表", link);
        }

        function detailInfo2(obj) {

            var standardType = $(obj).attr('standardType');

            var link = ctx + 'system/ncStandard/ncStandardFront?standardType=' + standardType;

            var s = $('#beginTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e;

            $.modal.openTab("标准列表", link);

        }


</script>
</body>

</html>